<template>
<div class="assetsdetailed">
    <section class="detailed">
        <ul class="detailedheader">
            <li class="list">
                <h2>{{$t('detailed[0]')}}</h2>
            </li>
            <li class="list">
                <h2>{{$t('detailed[1]')}}</h2>
                <el-select v-model="value" @change="handleSubmit" :placeholder="$t('detailed[2]')">
                    <el-option v-for="(item, index) in rechargetype" :key="index" :label="item.code" :value="item.wid">
                    </el-option>
                </el-select>
            </li>
        </ul>

        <section class="detailedmian">
            <el-tabs v-model="type" @tab-click="typehide">
                <el-tab-pane :label="$t('detailed[3]')" name="1">
                    <div class="chongbi">
                        <el-table :data="indexdata.data" style="width: 100%">
                            <el-table-column prop="address" :label="$t('detailed[4]')" width="386" align="left"></el-table-column>
                            <el-table-column prop="amount" :label="$t('detailed[5]')" width="240" align="left"></el-table-column>
                            <el-table-column prop="status" :label="$t('detailed[6]')" width="100" align="right">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.status == 1">{{$t('detailed[7]')}}</span>
                                    <span v-else-if="scope.row.status == 2">{{$t('detailed[8]')}}</span>
                                    <span v-else>{{$t('detailed[7]')}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="created_at" :label="$t('detailed[9]')" width="498" align="right"></el-table-column>
                        </el-table>
                    </div>
                    <PagesSize :content="indexdata" @func="getMsgFormSon"></PagesSize>
                </el-tab-pane>
                <el-tab-pane :label="$t('detailed[10]')" name="2">
                    <div class="tibi">
                        <el-table :data="withdrawLogdata.data" style="width: 100%">
                            <el-table-column prop="address" :label="$t('header.route[8]')" width="380" align="center"></el-table-column>
                            <el-table-column prop="amount" :label="$t('detailed[11]')" width="140" align="center"></el-table-column>
                            <el-table-column prop="created_at" :label="$t('detailed[12]')" width="170" align="center"></el-table-column>
                            <el-table-column prop="checked_at" :label="$t('detailed[13]')" width="170" align="center"></el-table-column>
                            <el-table-column prop="refuse_reason" :label="$t('detailed[14]')" nim-width="150" align="center"></el-table-column>
                            <el-table-column prop="status" :label="$t('detailed[15]')" width="100" align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.status == 1">{{$t('detailed[16]')}}</span>
                                    <span v-else-if="scope.row.status == 2">{{$t('detailed[17]')}}</span>
                                    <span v-else-if="scope.row.status == 3">{{$t('detailed[18]')}}</span>
                                    <span v-else-if="scope.row.status == 4">{{$t('detailed[19]')}}</span>
                                    <span v-else-if="scope.row.status == 5">{{$t('detailed[20]')}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" label="操作" width="100" align="center">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" v-if="scope.row.status == 1" @click="handlecancellations(scope.row)">撤销</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <PagesSize :content="withdrawLogdata" @func="getMsgFormSon"></PagesSize>
                </el-tab-pane>
                <el-tab-pane :label="$t('detailed[21]')" name="3">
                    <div class="qita">
                        <el-table :data="userMoneyLogdata.data" style="width: 100%">
                            <el-table-column prop="mark" :label="$t('detailed[22]')" width="486" align="left"></el-table-column>
                            <el-table-column prop="money" :label="$t('detailed[23]')" width="240" align="left"></el-table-column>
                            <el-table-column prop="created_at" :label="$t('detailed[24]')" width="498" align="right"></el-table-column>
                        </el-table>
                    </div>
                    <PagesSize :content="userMoneyLogdata" @func="getMsgFormSon"></PagesSize>
                </el-tab-pane>
            </el-tabs>
        </section>
    </section>
</div>
</template>

<script>
import {
    assetInfo
} from '@/api/user'
import {
    index,
    withdrawLog,
    userMoneyLog,
    revokewithdraw
} from '@/api/assetstotal'
// import { mapActions } from 'vuex'
// import { setToken } from "@/libs/util";
import PagesSize from "_dom/paging"
export default {
    name: 'assetsdetailed',
    data() {
        return {
            indexdata: "",
            withdrawLogdata: "",
            userMoneyLogdata: "",
            type: "1",
            changedata: {
                page: "1",
                wid: "1"
            },
            rechargetype: [],
            value: "",
        }
    },
    methods: {
        handlecancellations(row) { // 撤销
            console.log(row.order_no);
            revokewithdraw({
                order_no: row.order_no
            }).then(res => {

                this.$message({
                    message: this.$t('msg[4]'),
                    type: "success"
                });

            }).catch(err => {})
        },
        handleSubmit() {
            this.changedata.wid = this.value;
            this.changedata.page = '1';
            this.typget();
        },
        indexget() { //用户充币明细
            index(this.changedata).then(res => {
                 
                    this.indexdata = res;
                
            }).catch(err => {});
        },
        withdrawLogget() { //提币明细
            withdrawLog(this.changedata).then(res => {
                if (res.data.status_code == 200) {
                    this.withdrawLogdata = res.data.data;
                }
            }).catch(err => {});
        },
        userMoneyLogget() { //资金明细(其他)
            this.changedata.account = this.$route.query.type
            userMoneyLog(this.changedata).then(res => {
                 
                    this.userMoneyLogdata = res;
                 
            }).catch(err => {});
        },

        typehide(row) {
            this.type = row.name;
            this.changedata = {
                page: "1",
                wid: "1"
            };
            this.typget();
        },
        getMsgFormSon(datavue) {
            this.changedata.page = datavue.page;
            this.typget();
        },
        typget() {
            switch (this.type) {
                case '1':
                    this.indexget();
                    break;
                case '2':
                    this.withdrawLogget();
                    break;
                case '3':
                    this.userMoneyLogget();
                    break;
                default:
                    break;
            }
        }
    },
    created() {
        assetInfo({
            account: this.$route.query.type
        }).then(res => {
             
                this.rechargetype = res.asset_list;
                this.value = res.asset_list[0].wid;
                this.indexget();
            
        }).catch(err => {

        });

    },
    components: {
        PagesSize,
    },
}
</script>
